
<?php $this->beginClip('pagetitle'); ?>转盘游戏<?php $this->endClip(); ?>
<?php $this->beginClip('js-files'); ?>
    <script src="/resources/common/js/awardRotate.js"></script>
    <link rel="stylesheet" type="text/css" media="all" href="/resources/frontend/css/animate.min.css?a=<?php echo rand(); ?>" />
<?php $this->endClip(); ?>

<header class="page-header black" style="margin: 0;">
	<a href="">
		<span class="am-icon-chevron-left" id="btn-back" style="color: #FFF !important;"></span>
		<h1>转盘</h1>
	</a>
</header>
<style>

/*@media screen  and (max-width: 320px) { 设置中奖纪录iphone5的高度 
	ul{height: 160px}
}*/
/*.rule ul{
    text-align: left;
}*/
.wheel-1{
    top:200px;
    background-color:rgb(252,228,202);
    color:red;
}
.wheel-2{
    color:red;
    top:230px;
    background-color:rgb(252,228,202);
}
.record_line{
    background-color:rgb(252,228,202);
    top:5px;
}
</style>
<div class="turntable-wrap" style="position:relative;">

    <img class="animated bounceIn" src="/resources/frontend/images/txt_xydzp.png" style="display: block; width: 75%; margin: 60px auto 20px auto;" />
    <div class="count_notice" style="position:relative;height: 25px;width: 100%;height:30px;top:-5px;">
        <img src="/resources/frontend/images/lotterylabel.png" style="position:absolute;height: 30px;left:15%;width:70%;" />
        <!--游戏次数-->
        <span class="activitycount animated flash" style="display: block;position:absolute;width:10%;height: 30px;left:45%;line-height: 30px;font-size: 25px;text-align: center;color:red;"></span>
    </div>
    <!--中奖记录-->
    <a class="wheel-1 prize-rule-reward" href="">记录》</a>
    <!--活动规则-->
    <span class="wheel-2 prize-rule-reward" id="prize_rule">规则》</span>
    <div class="banner">
		<div class="turnplate" style="background-image:url(/resources/frontend/images/turnplate-bg.png);background-size:100% 100%;">
			<canvas class="item" id="wheelcanvas" width="844px" height="844px"></canvas>
			<img class="pointer" src="/resources/frontend/images/turnplate-pointer.png"/>
        </div>
    </div>
</div>
<div class="zz"></div>
<div class="jl-tk">
    <img src="/resources/frontend/images/close.png" class="cjgz-c">
    <img src="/resources/frontend/images/zj-tk.png" class="zj-img">
    <img src="/resources/frontend/images/ok-img.png" class="ok-img">
    <p class="texts"></p>
</div>
<div class="rule-main" id="rule-main">
    <div class="rule">
        <p>活动规则</p>     
        <ul id="thelist">
            <li>活动可以用积分,积分+余额,余额模式来参与</li>
            <li>活动获得的奖品可以在记录里查看</li>
            <li>活动的最终解释权归本店所有</li>
        </ul>
        <div class="rule_close">我知道了</div>
    </div>
</div>
<script type="text/javascript">
var turnplate={
    restaraunts:[],				//大转盘奖品名称
    colors:[],					//大转盘奖品区块对应背景颜色
    outsideRadius:192,			//大转盘外圆的半径
    textRadius:155,				//大转盘奖品位置距离圆心的距离
    insideRadius:58,			//大转盘内圆的半径
    startAngle:0,				//开始角度

    bRotate:false				//false:停止;ture:旋转
};

$(document).ready(function(){
    //动态添加大转盘的奖品与奖品区域背景颜色
    turnplate.restaraunts = ["10优惠券","10现金券","100优惠券","100现金券","1000优惠券","1000现金券"];
	turnplate.colors = ["#FFCCFF", "blue","#FFCCFF", "blue","#FFCCFF", "blue","#FFCCFF", "blue"];
	var rotateTimeOut = function (){
		$('#wheelcanvas').rotate({
			angle:0,
			animateTo:4320,
			duration:8000, 
			callback:function (){
				alert('网络超时，请检查您的网络设置！');
			}
		});
	};

	//旋转转盘 item:奖品位置; txt：提示语;
	var rotateFn = function (item, txt, ret){
		var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2));
		if(angles<270){
			angles = 270 - angles; 
		}else{
			angles = 360 - angles + 270;
		}
		$('#wheelcanvas').stopRotate();
		$('#wheelcanvas').rotate({
			angle:0,
			animateTo:angles+3600,
			duration:4000,
			callback:function (){
                if(txt == '谢谢参与'){
                    $(".texts").html("很遗憾，未中奖<br>" + txt);
                }else{
                    $(".texts").html("恭喜您，已获得<br>" + txt);
                }
                
				$(".zz").show();
				$(".jl-tk").show();
            turnplate.bRotate = !turnplate.bRotate;
			}
		});
	};
	$('.pointer').on('tap',function (){
		if(turnplate.bRotate)return;
        turnplate.bRotate = !turnplate.bRotate;
            rotateFn(2,'100现金券');
    });
    $(".ok-img").on('tap', function() {
        $(".zz").hide();
        $(".jl-tk").hide();
    });
    $(".cjgz-c").on('tap', function() {
        $(".zz").hide();
        $(".jl-tk").hide();
    });
});

//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
window.onload=function(){
	drawRouletteWheel();
};

function drawRouletteWheel() {    
    var canvas = document.getElementById("wheelcanvas"); 

    if (canvas.getContext) {
	  //根据奖品个数计算圆周角度
        var arc = Math.PI / (turnplate.restaraunts.length/2);
        var ctx = canvas.getContext("2d");
        ctx.scale(2,2);
        //在给定矩形内清空一个矩形
        ctx.clearRect(0,0,422,422);
        //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式  
        ctx.strokeStyle = "#FFBE04";
        //font 属性设置或返回画布上文本内容的当前字体属性
        ctx.font = '16px Microsoft YaHei';      
        for(var i = 0; i < turnplate.restaraunts.length; i++) {       
            var angle = turnplate.startAngle + i * arc;
            ctx.fillStyle = turnplate.colors[i];
            ctx.beginPath();
            //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）    
            ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);    
            ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
            ctx.stroke();  
            ctx.fill();
            //锁画布(为了保存之前的画布状态)
            ctx.save();   

        //----绘制奖品开始----
        ctx.fillStyle = "white";
        var text = turnplate.restaraunts[i];
        //translate方法重新映射画布上的 (0,0) 位置
        ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);

        //rotate方法旋转当前的绘图
        ctx.rotate(angle + arc / 2 + Math.PI / 2);
        ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
          //把当前画布返回（调整）到上一个save()状态之前 
        ctx.restore();
		  //----绘制奖品结束----
        }     
    } 
}
</script>